<!--2 X 2 画面 多屏监控 -->
<template>
  <div class="main_compent">
    <div class="box_site22">
      <div v-for="item in playerPanels" class="div_site22" :ref="item.ref"  :style="item.style"
           @click="click(item.id)" @mouseover="mouseOver(item.id)" @mouseleave="mouseLeave(item.id)">
        <CommPlayer  :ref="item.playerRef"></CommPlayer>
      </div>

      <!--      <div class="div_site22" ref="box1" :style="{ border: border1}" @click="click(0)"><CommPlayer  ref="jsPLayer1"></CommPlayer></div>
            <div class="div_site22" ref="box2" :style="{ border: border2}" @click="click(1)"><CommPlayer  ref="jsPLayer2"></CommPlayer></div>
            <div class="div_site22" ref="box3" :style="{ border: border3}" @click="click(2)"><CommPlayer  ref="jsPLayer3"></CommPlayer></div>
            <div class="div_site22" ref="box4" :style="{ border: border4}" @click="click(3)"><CommPlayer  ref="jsPLayer4"></CommPlayer></div>
          -->
    </div>
  </div>
</template>
<script>
import CommPlayer from "@/view/Home/component/CommPlayer";
export default {
  components:{CommPlayer},
  data(){
    return{
      active: 'border:1px solid #ff0000', //选中时的边框
      unActive: 'border:1px solid #14edc5', //没选中时的边框
      moveIn: 'border:1px solid #063ffc',//移入时边框
      currentBoxNum:-1, //当前选择框，-1是没有选择
      playerPanels:[ //播放面板
        {id:0,ref:'playerBox220',style:'border:1px solid #14edc5',playerRef:"jsPLayer220",active:false},
        {id:1,ref:'playerBox221',style:'border:1px solid #14edc5',playerRef:"jsPLayer221",active:false},
        {id:2,ref:'playerBox222',style:'border:1px solid #14edc5',playerRef:"jsPLayer222",active:false},
        {id:3,ref:'playerBox223',style:'border:1px solid #14edc5',playerRef:"jsPLayer223",active:false},
      ]
    }
  },
  methods:{
    /** BOX 点击事件  */
    click(number){
      for(let i in this.playerPanels){
        if (i == number){
          if (this.playerPanels[i].active){
            // 本来就选中的则取消
            this.playerPanels[i].active = false;
            this.playerPanels[i].style = this.unActive;
            this.currentBoxNum = -1;

          }else{
            // 没选中的就选中
            this.playerPanels[i].active = true;
            this.playerPanels[i].style = this.active;
            this.currentBoxNum = number;
          }
        }else{
          // 其它box 恢复原状态
          this.playerPanels[i].active = false;
          this.playerPanels[i].style = this.unActive;
        }
      }
    },
    /** BOX 移入 事件 */
    mouseOver(number) {
      //console.log("mouseOver( %o )",number);
      //console.log("this.playerPanels[%o]: %o",number,this.playerPanels[number]);
      /*      if (!this.playerPanels[number].active){
              this.playerPanels[number].style = this.active;
            }*/
      this.playerPanels[number].style = this.moveIn;
    },
    /** BOX 移出 事件 */
    mouseLeave(number) {

      if (!this.playerPanels[number].active){
        this.playerPanels[number].style = this.unActive;
      }else{
        this.playerPanels[number].style = this.active;
      }
      //console.log("mouseLeave: %o",number);
    },
    /** 给父组件 播放调用 */
    play(videoUrl){
      //选择可播放的 面板
      if (this.currentBoxNum != -1){
        // 选中某个格子播放
        this.$refs[this.playerPanels[this.currentBoxNum].playerRef][0].play(videoUrl)
        return;
      }
      // 没选中则一直向后找，哪个格子有空就播放
      for(let i in this.playerPanels){
        if (!this.$refs[this.playerPanels[i].playerRef][0].isPlaying()){
          this.$refs[this.playerPanels[i].playerRef][0].play(videoUrl)
          return;
        }
      }
    },
  },

  beforeDestroy(){
    console.log("*****MultiScr2X2 destroy*******");
  },
}
</script>
<style lang="less">
@import "src/view/template.less";
.main_compent{
  width:100%;
  height:100%;
}
.box_site22 {
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  flex-wrap: wrap;
  //border: 1px solid #063ffc;

  .div_main22 {
    width: calc(100% / 2);
    height: calc(100% / 2);
    border: 1px solid #14edc5;
    box-sizing: border-box;

  }
  .div_site22 {
    width: calc(100% / 2);
    height: calc(100% / 2);
    border: 1px solid #14edc5;
    box-sizing: border-box;
  }
}
</style>
